<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body class="df fdcolumn">
    <main class="flex  fdcolumn os">
        <!-- !-- 轮播区域 -->
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <!-- Slides -->
                <div class="swiper-slide index-swiper1"></div>
                <div class="swiper-slide index-swiper2"></div>
                <div class="swiper-slide index-swiper3"></div>
            </div>
            <!-- If we need pagination -->
            <div class="swiper-pagination"></div>
        </div>

        <div id="itemList" class="df flex fdcolumn">
            <!-- 今日排名 & 累积打卡 -->
            <div class="row-container list">
                <div class="row-card row-card-ranking mr16">
                    <p class="tilte">今日排名</p>

                    <p id="rankCount" class="rank-count">9</p>
                </div>
                <div class="row-card row-card-sum">
                    <p class="tilte">累积打卡<span id="punchSum">--</span>天</p>
                    <div id="checkBtn" class="checkbtn f16">今日打卡</div>
                </div>
            </div>
            <!-- 运动数据 & 累积运动徽章 -->
            <div class="row-container02 list">
                <div class="row-card row-card-data mr16">
                    <p class="tilte">运动数据</p>
                </div>
                <div class="row-card row-card-badge">
                    <p class="tilte">累积运动徽章</p>
                    <div id="badgeBtn">
                        <p id="badgeCount" class="badges-count">3 </p><span>枚</span>
                    </div>
                </div>
            </div>
            <div class="row-container03 list">
                <div class="row-card  row-card-Course flex">
                    <p class="tilte">课程训练</p>
                </div>
            </div>
            <div class="row-container04 list">
                <div class="row-card  row-card-Course flex">
                    <p class="tilte">户外跑步</p>
                </div>
            </div>
        </div>
    </main>
    <footer id="tabmenu" class="df">
        <!-- <ul class="df">
            <li>
                <a href="">
                    <span class="iconfont icon-home"></span>
                    <p>首页</p>
                </a>
            </li>
            <li>
                <a href="">
                    <span class="iconfont icon-ball"></span>
                    <p>运动</p>
                </a>
            </li>
            <li>
                <a href="">
                    <span class="iconfont icon-frequency"></span>
                    <p>圈子</p>
                </a>
            </li>
            <li>
                <a href="">
                    <span class="iconfont icon-mine"></span>
                    <p>我的</p>
                </a>
            </li>
        </ul> -->
    </footer>
</body>

</html>